<template>
    <div
        class="goods-group widgets-goods-group"
        :style="{
            margin: `-${styles.margin / 2}px`,
            'background-color': styles.content_bg_color,
            'border-radius': `${styles.border_radius_top}px ${styles.border_radius_top}px ${styles.border_radius_bottom}px ${styles.border_radius_bottom}px`,
            padding: `${styles.padding / 2}px`
        }"
    >
        <div
            class="goods-lists"
            :class="{
                larger: content.style == 1,
                perline: content.style == 2,
                swiper: content.style == 3,
                lists: content.style == 4,
                'goods-lists-larger': content.style == 1,
                'goods-lists-perline': content.style == 2,
                'goods-lists-swiper': content.style == 3,
                'goods-lists-lists': content.style == 4
            }"
        >
            <div class="goods-wrap" v-for="(item, index) in goods" :key="index">

                <div
                    class="goods-item"
                    :style="{
                        'background-color': styles.bg_color,
                        margin: `${styles.margin / 2}px`,
                        'border-radius': `${styles.goods_border_radius}px`
                    }"
                >
                    <div class="goods-image">
                        <el-image :src="item.image" fit="cover">
                            <img slot="error" class="image-error" src="@/assets/images/goods_image.png" alt="" />
                        </el-image>
                    </div>
                    <div class="goods-info p-5">

                        <div
                            v-if="content.show_title"
                            class="m-b-4 goods-info-row1"
                            :style="{
                                color: styles.title_color
                            }"
                        >
                           
                            <div :class="content.style == 3 ? 'line-1' : 'line-2'">
                                <!-- @todo 所选商品上必须要有个tag的标签，标识是最新还是热卖 -->
                                <span v-if="content.show_tag" class="goods-info-tag " :class="[index % 2 == 0 ? 'goods-info-tag-new' : 'goods-info-tag-hot']"> 
                                    {{ index % 2 == 0 ? '最新' : '热卖'}}
                                </span>
                                <span>{{ item.name || '这里是商品标题' }}</span>
                            </div>
                        </div>
                        <div class="flex goods-info-row2 flex-wrap">
                            <div class="flex-1 flex col-baseline" v-if="content.style != 2">
                                <div
                                    v-if="content.show_price"
                                    class="price weight-500 m-r-5 xl"
                                    :style="{
                                        color: styles.price_color
                                    }"
                                >
                                    <span class="xs">￥</span>{{ parseFloat(item.sell_price) || '0' }}
                                </div>
                                <div class="muted line-through xs" v-if="content.show_scribing_price">
                                    ￥{{ parseFloat(item.lineation_price) || '0' }}
                                </div>
                            </div>
                            <div class="" v-if="content.style == 2">
                                <div class="muted line-through xs" v-if="content.show_scribing_price">
                                    <span style="">原价</span>
                                    <span>&nbsp;&nbsp;</span>
                                    <!-- <span>￥</span> -->
                                    <span>{{ parseFloat(item.lineation_price) || '0' }}</span>
                                </div>
                                <div
                                    v-if="content.show_price"
                                    class="price weight-500 m-r-5 xl"
                                    :style="{
                                        color: styles.price_color
                                    }"
                                >
                                    <span class="membership-price-label">会员价</span>
                                    <span class="membership-price-unit">￥</span>
                                    <span class="membership-price-value">{{ parseFloat(item.sell_price) || '0' }}</span>
                                </div>
                               
                            </div>
                            <div
                                class="buy-btn xs"
                                v-if="content.show_btn && (content.style == 1 || content.style == 4)"
                                :style="[btnStyle]"
                            >
                                {{ content.btn_text }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
// @TODO CSS 嵌套太深
// @TODO template 中 if else 太多，应该通过 slot 来实现
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class Goods extends Vue {
    @Prop() content!: any
    @Prop() styles!: any

    get goods() {
        const { data, goods_type, category } = this.content
        if (goods_type == 2) {
            return [...Array(category.num).keys()].map(() => ({}))
        }
        return data.length ? data : [{}, {}, {}, {}]
    }
    get btnStyle() {
        const { btn_bg_color, btn_color, btn_border_radius, btn_border_color } = this.styles
        const style = {
            'background-color': btn_bg_color,
            color: btn_color,
            'border-radius': `${btn_border_radius}px`,
            'border-color': btn_border_color
        }
        return style
    }
}
</script>

<style lang="scss" scoped>
// @TODO CSS 嵌套太深

.goods-group {
    overflow: hidden;
    .goods-lists {
        overflow: hidden;
       
    }
    // S 初始化 goods-wrap
    .goods-wrap {
        overflow: hidden;
       
    }
    .goods-item {
        overflow: hidden;
        display: flex;
        flex-direction: column;
       
    }
    .goods-image {
        position: relative;
        width: 100%;
        padding-top: 100%;
        box-sizing: border-box;
        .el-image {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
        }
        .image-error {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .goods-info {
        flex: 1;

        
    }
    .buy-btn {
        flex: none;
        background: #ff2c3c;
        padding: 2px 16px;
        color: #fff;
        border-radius: 2px;
        border: 1px solid transparent;
    }
    .goods-info-row1 {
        color: #333333;
    }
    .price {
        color: #ff2c3c;
    }
    // E 初始化 godds-wrap
    
    .goods-lists-larger {
        .goods-info {
            padding: 10px;
        }
        .goods-image {
            padding-top: 46%;
        }
    }
    .goods-lists-perline {
        display: flex;
        flex-wrap: wrap;
        .goods-wrap {
            width: 50%;
        }
        .goods-info-row1 {
            line-height: 18px;
            height: 36px;
        }
        .membership-price-label {
            font-size:12px;
            font-weight: 400;
            color: #E60000;
            border: 1px solid #E60000;
            border-radius: 3px;
            vertical-align: middle;
        }
        .membership-price-value {
            font-size: 17px;
            font-weight: 700;
            color: #E60000;
        }
        .membership-price-unit {
            color: #E60000;
            font-size: 12px;
        }
    }
    .goods-lists-swiper {
        display: flex;
        .goods-wrap {
            flex: 0 0 36%;
            width: 36%;
        }
    }
    .goods-lists-lists {
        .goods-item {
            flex-direction: row;
            
        }
        .goods-image {
            width: 120px;
            padding-top: 120px;
        }
        .goods-info {
            position: relative;
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          
        }
    }
}
</style>

<style lang="scss" scoped>
.widgets-goods-group {
    .goods-info-tag {
        display: inline-block;
        width: 40px;
        padding: 0 6px;
        margin-right: 5px;
        text-align: center;
        vertical-align: middle;
        font-size: 10px;
        border-radius: 999px;
        color: #fff;
        background: #E60000;

    }
    .goods-info-tag-new {
        background: #FFD100;
    }
    .goods-info-tag-hot {
        background: #E60000;
    }
    .goods-lists-perline {
        
    }
}
</style>
